<template>
  <div>
    <div>
      <a-page-header
        style="border: 1px solid rgb(235, 237, 240);font-size: 25px !important;"
        sub-title="查看角色"
        @back="fanhui()" 
      />
    </div>
    <el-form class="form">
      <div class="head">
        <!-- <el-input class="elinput" placeholder="根据关键字查询题型" v-model="input" clearable></el-input> -->
        <!-- <el-button class="elbut" type="primary" icon="el-icon-search" @click="but">搜索</el-button> -->
        <!-- <tianjiaUserpush
          style="display: -webkit-inline-box;margin-top: 20px;margin-left: 15px;"
        ></tianjiaUserpush> -->
        <div class="clear"></div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="ID" type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色时间" prop="createTime"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-popconfirm title="确定删除吗？" @confirm="del(scope.row)">
              <el-button disabled  type="text" size="small" slot="reference">删除</el-button>
            </el-popconfirm>
            <tianjiaUserpush
              :ids="scope.row"
              style="display: -webkit-inline-box;margin-top: 20px;margin-left: 15px;"
            ></tianjiaUserpush>
            <!-- <el-button type="text" size="small" @click="bianji(scope.row)">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right;margin-top: 4%;">
        <!-- <el-pagination background layout="prev, pager, next" :total="100"></el-pagination> -->
      </div>
    </el-form>
    <!-- 编辑框 -->
  </div>
</template>
<script>
import Usergetpush from "../api/Userpush";
import tianjiaUserpush from "./tianjiaUserpush.vue";
export default {
  data() {
    return {
      input: "",
      tableData: [],
      dialogVisible: false,
    };
  },
  mounted() {
    this.Usergetpush();
  },
  components: {
    tianjiaUserpush
  },
  methods: {
    but() {
      if (this.input == "") {
        this.$message({
          message: "搜索框不能为空",
          type: "warning"
        });
        return;
      }
      this.axios.get(`/question/qdetails/get/${this.input}`).then(res => {
        this.$emit("tableDatas", res.data);
      });
    },
    onChanges(checkeds) {
      console.log(`a-switch to ${checkeds}`);
    },
    Usergetpush() {
      Usergetpush.Userget().then(res => {
        if(res.data.code === 401){
          localStorage.clear();
        }
        if(res.data.code === 500){
          alert(res.data.msg)
        }
        // console.log(res.data)
        this.tableData = res.data.list.list
        // console.log(this.tableData);
      });
    },
    del(row) {
      Usergetpush.del(row.pid).then(() => {
        // console.log(row.pid);
        // console.log(res)
        this.$message({
          message: "恭喜你，删除成功",
          type: "success"
        });
      });
    },
    tableDatas(data) {
      this.tableData = data;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.resetForm();
        })
        .catch(() => {});
    },
    resetForm() {
      this.dialogVisible = false;
    },
    bianji(data) {
      console.log(data);
      this.dialogVisible = true;
    },
    // quedinig() {
    //   console.log(this.form.name);
    //   console.log(this.value);
    //   console.log(this.data);
    // },
    fanhui() {
      this.$router.push("/UserorRole?name=查看用户");
    }
  }
};
</script>
<style scoped>
.form {
  width: 80%;
  height: 600px;
  /* background-color: red; */
  margin: auto;
}
.head {
  width: 45%;
  float: right;
  /* background-color: royalblue; */
}
#cent {
  margin: auto;
}
.elbut {
  float: left;
  margin-top: 20px;
}
.elinput {
  float: left;
  width: 50%;
  margin-right: 20px;
  margin-top: 20px;
}
.crebut {
  float: left;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.clear {
  clear: both;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>